<template>
  <div class="fans-part tabs-part">
    <div class="part-one flex-between">
      <div class="country-part card">
        <p class="card-name">受众地区</p>
        <div id="map-echart"></div>
        <div class="chart-tips flex">
          <div class="chart-tips_bar flex-center">
            <span></span><span></span><span></span><span></span>
          </div>
        </div>
        <p class="card-desc">受众地区分布是通过红人数据授权或AUPR算法对红人受众用户地理位置特征等数据计算生成</p>
      </div>
      <div class="rate-part card">
        <p class="card-name">受众地区占比</p>
        <div class="area-proportion-list">
          <div v-for="(item, index) in areaProportion.slice(0, 8)" :key="index" class="area-proportion-item flex">
            <p class="area-proportion-item-index font-20-B">0{{ index + 1 }}</p>
            <div class="area-proportion-item-right">
              <div class="area-proportion-item-bar">
                <p :style="{ width: item.value + '%', background: areaProportionColorList[index] }"></p>
              </div>
              <p class="area-proportion-item-value font-14">{{ item.name }} {{ item.value }}%</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="part-two flex-between">
      <div class="sex-part card">
        <p class="card-name">性别比例</p>
        <div id="sex-echart"></div>
        <p class="card-desc">受众性别占比是通过红人数据授权或由AUPR算法对红人受众用户性别特征等数据计算生成</p>
      </div>
      <div class="age-part card">
        <p class="card-name">年龄统计</p>
        <div id="age-echart"></div>
        <p class="card-desc">受众年龄分布是通过红人数据授权或由AUPR算法对红人受众用户年龄层数据分析计算生成</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps, ref, onMounted } from 'vue';
import * as echarts from "echarts";
import '@/js/world.js';
import nameMap from '@/js/nameMap.js';

const props = defineProps(['detail']);
console.log(props)

const areaProportionColorList = ['#ff5277', '#555cfd', '#73deb3', '#fdbd36', '#f47827', '#b475ff', '#f4d527', '#86e671'];

const areaProportion = ref([
  {
    name: '印度',
    value: 53.08
  },
  {
    name: '荷兰',
    value: 14.86
  },
  {
    name: '圣诞岛',
    value: 6.67
  },
  {
    name: '越南',
    value: 6.28
  },
  {
    name: '格鲁吉亚',
    value: 5.68
  },
  {
    name: '塔吉克斯坦',
    value: 4.74
  },
  {
    name: '塞浦路斯',
    value: 4.59
  },
  {
    name: '德国',
    value: 4.10
  }
]);
const genderProportion = ref([
  {
    time: '男性',
    value: 82.64
  },
  {
    time: '女性',
    value: 17.36
  }
]);
const ageStatistics = ref([
  {
    name: '13-17',
    value: 10.35
  },
  {
    name: '18-24',
    value: 30.07
  },
  {
    name: '25-34',
    value: 31.23
  },
  {
    name: '35-44',
    value: 11.12
  },
  {
    name: '45-54',
    value: 5.04
  },
  {
    name: '55+',
    value: 12.19
  }
]);

// 受众地区echart
const mapEchart = () => {
  const domMap = document.getElementById("map-echart");
  domMap.removeAttribute("_echarts_instance_");
  const myEChart = echarts.init(domMap);
  const option = {
    visualMap: {
      //图列显示柱
      type: 'continuous',
      min: 0,
      max: 15,
      itemHeight: 0,
      realtime: false,
      // color: ['#ff5277', '#ff5277cc', '#ff527799', '#ff527766']
    },
    tooltip: {
      //提示框组件
      trigger: 'item',
      formatter: function (e) {
        if (e.data) {
          return `${e.data.name}<br/>粉丝量：${e.data.value}%`;
        } else {
          return '';
        }
      }
    },
    series: [{
      type: 'map',
      mapType: 'world',
      data: areaProportion.value,
      //绑定数据
      nameMap,
      label: {
        normal: { show: false },
        emphasis: { show: false }
      },
    }]
  };
  myEChart.setOption(option);
}
// 性别echart
const sexEchart = () => {
  const domMap = document.getElementById("sex-echart");
  domMap.removeAttribute("_echarts_instance_");
  const myEChart = echarts.init(domMap);
  const option = {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      top: '5%',
      left: '5%'
    },
    tooltip: {
      //提示框组件
      trigger: 'item',
      formatter: '{b}占比：{c}%'
    },
    color: ['#555cfd', '#ff5277'],
    series: [
      {
        type: 'pie',
        radius: ['50%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderColor: '#fff',
          borderWidth: 5
        },
        label: {
          show: true,
          position: 'center',
          fontSize: 24,
          fontWeight: 'bold',
          formatter: '{b}'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 24,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: genderProportion.value
      }
    ]
  };
  myEChart.setOption(option);
}
// 年龄echart
const ageEchart = () => {
  const domMap = document.getElementById("age-echart");
  domMap.removeAttribute("_echarts_instance_");
  const myEChart = echarts.init(domMap);
  let xAxisData = [], seriesData = [];
  ageStatistics.value.forEach(item => {
    xAxisData.push(item.name);
    seriesData.push(item.value);
  });
  const option = {
    xAxis: {
      type: 'category',
      data: xAxisData,
      axisLine: {
        lineStyle: {
          type: 'dashed'
        }
      },
      axisTick: {
        show: false
      }
    },
    yAxis: {
      type: 'value',
      splitLine: {
        lineStyle: {
          type: 'dashed'
        }
      },
      axisLabel: {
        formatter: '{value}%'
      }
    },
    series: [
      {
        data: seriesData,
        type: 'bar',
        barWidth: 20,
        label: {
          show: true,
          position: 'top',
          formatter: '{c}%'
        },
        itemStyle: {
          color: '#f85277',
          borderRadius: [10, 10, 0, 0]
        }
      }
    ]
  };
  myEChart.setOption(option);
}

onMounted(() => {
  mapEchart();
  sexEchart();
  ageEchart();
});
</script>

<style lang="less" scoped>
.card {
  padding: 24px;
  border-radius: 20px;
  background: #fff;
  margin-bottom: 24px;

  .card-name {
    display: flex;
    align-items: center;
    font-size: 16;
    color: #333;

    &::before {
      content: "";
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: @main-color;
      margin-right: 8px;
    }
  }

  .card-desc {
    border-top: 2px solid #ededed;
    color: #999;
    padding-top: 14px;
    font-size: 14px;
  }
}

.part-one {
  .country-part {
    width: 784px;

    #map-echart {
      height: 380px;
      margin-top: 40px;
    }

    .chart-tips {
      height: 74px;
      justify-content: flex-end;

      .chart-tips_bar {
        span {
          width: 80px;
          height: 10px;
          position: relative;

          &::before {
            position: absolute;
            font-size: 12px;
            color: #999;
            line-height: 17px;
            top: 12px;
          }

          &:nth-child(1) {
            background: rgb(255, 82, 119);

            &::before {
              content: "";
              left: 0;
            }
          }

          &:nth-child(2) {
            background: rgba(255, 82, 119, 0.8);

            &::before {
              content: "15%";
              left: -4px;
            }
          }

          &:nth-child(3) {
            background: rgba(255, 82, 119, 0.6);

            &::before {
              content: "10%";
              left: -4px;
            }
          }

          &:nth-child(4) {
            background: rgba(255, 82, 119, 0.4);

            &::before {
              content: "5%";
              left: -4px;
            }

            &::after {
              content: "0";
              position: absolute;
              font-size: 12px;
              color: #999;
              line-height: 17px;
              top: 12px;
              right: 0;
            }
          }
        }
      }
    }
  }

  .rate-part {
    width: 460px;

    .area-proportion-list {
      margin-top: 62px;

      .area-proportion-item {
        margin-bottom: 23px;

        .area-proportion-item-index {
          color: #333;
          margin-right: 20px;
        }

        .area-proportion-item-right {
          .area-proportion-item-bar {
            width: 320px;
            height: 10px;
            background: #ebeef5;
            border-radius: 0 15px 15px 0;
            margin-bottom: 6px;

            p {
              border-radius: 0 15px 15px 0;
              height: 10px;
            }
          }

          .area-proportion-item-value {
            color: #1d2129;
          }
        }
      }
    }
  }
}

.part-two {
  .sex-part {
    width: 400px;
    height: 430px;

    #sex-echart {
      height: 300px;
    }
  }

  .age-part {
    width: 844px;
    height: 430px;

    #age-echart {
      height: 300px;
    }
  }
}
</style>
